<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>用户列表</title>
    <style>
        .user-table {
            width: 800px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<div class="user-table">
    <button class="btn btn-default" type="button" data-toggle="modal" data-target="#add">新增</button>

    <table class="table table-hover">
        <thead>
        <tr>
            <th>id</th>
            <th>用户名</th>
            <th>手机</th>
            <th>邮箱</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="item : ${list}">
            <td th:text="${item.id}"></td>
            <td th:text="${item.userName}"></td>
            <td th:text="${item.phoneNumber}"></td>
            <td th:text="${item.email}"></td>
            <td>
                <button class="btn btn-default" type="button" th:onclick="editUser([[${item.id}]])">编辑</button>
                <button class="btn btn-default" type="button" th:onclick="deleteUser([[${item.id}]])">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<!-- Modal -->
<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">新增用户</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="userName">用户名</label>
                        <input type="text" class="form-control" id="userName" placeholder="用户名">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" placeholder="密码">
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" class="form-control" id="email" placeholder="邮箱">
                    </div>
                    <div class="form-group">
                        <label for="phoneNumber">手机</label>
                        <input type="number" class="form-control" id="phoneNumber" placeholder="手机">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addUser">提交</button>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    $(document).ready(function () {
        $("#addUser").click(function () {
            $.ajax({
                url: "/user",
                data: {
                    "userName": $("#userName").val(),
                    "email": $("#email").val(),
                    "password": $("#password").val(),
                    "phoneNumber": $("#phoneNumber").val(),
                },
                type: "POST", success: function (result) {
                    console.log(result);
                    $('#add').modal('hide');
                    window.history.go(0)
                }
            });
        });

        $('#add').on('hidden.bs.modal', function (e) {
            $("#userName").val('');
            $("#email").val('');
            $("#password").val('');
            $("#phoneNumber").val('');
        })
    });

    function editUser(id) {

        $.ajax({
            url: "/user/" + id,
            type: "GET", success: function (result) {
                console.log(result);
                if (result.code === 0) {
                    $("#userName").val(result.data.userName);
                    $("#email").val(result.data.email);
                    $("#password").val('');
                    $("#phoneNumber").val(result.data.phoneNumber);
                    $('#add').modal('show');
                }
            }
        });
    }

    function deleteUser(id) {
        console.log(id);
        $.ajax({
            url: "/user/delete/" + id,
            type: "GET",
            success: function (result) {
                console.log(result);
                window.history.go(0)
            }
        });
    }
</script>
</html>
